<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            width: 1000px;
            height: 500px;
            border: 1px solid  red;
        }
    </style>
</head>
<body>
     

    <div id="app">
        <div style="display:flex">
            <div>
                <input type="checkbox" name="" class="checkall" value="">
                <span>全选</span>
            </div>
            <div style="width: 200px; padding-left: 50px;">
           商品名称
            </div>
            <div style="width: 100px;">
           单价
            </div>
            <div style="width: 100px;">
           数量
            </div>
            <div style="width: 100px;">
           小计
            </div>
            <div style="width: 100px;">
                操作
            </div>
        </div>
        <div style="display: flex; background-color: pink; margin-top: 10px; align-items: center;">
            <div>
                <input class="checkone" type="checkbox" name="" id="" value="">
            </div>
            
            <div style="display: flex;">
                <div  style="padding-left: 90px;"> iphone</div>
                <div style="width: 50px; height: 80px; background-color: aqua; margin-left: 20px;">
                </div>
            </div>
            <div class="price" style="width: 100px; margin-left: 72px;">
                4200
            </div>
            <div style="display: flex;">
                <div class="jian" style="width: 30px; height: 30px; background-color: aqua; text-align: center;">-</div>
                <div class="num">1</div>
                <div class="add" style="width: 30px; height: 30px; background-color: aqua; text-align: center;">+</div>
            </div>
            <div style="width: 100px;margin-left: 36px;">
                 <span class="subtotal">4200</span> <span>元</span>
            </div>
            <div class="del"  style="width: 100px;margin-left: 10px;">
                删除
            </div>
        </div>
        <div style="display: flex; background-color: pink; margin-top: 10px;align-items: center;">
            <div>
                <input class="checkone" type="checkbox" name="" id="" value="">
            </div>
            <div style="display: flex;">
                <div  style="padding-left: 90px;"> 小米</div>
                <div style="width: 50px; height: 80px; background-color: aqua; margin-left: 40px;">
                </div>
            </div>
            <div class="price" style="width: 100px; margin-left: 72px;">
                3200
            </div>
            <div style="display: flex;">
                <div class="jian" style="width: 30px; height: 30px; background-color: aqua; text-align: center;">-</div>
                <div class="num">4</div>
                <div class="add" style="width: 30px; height: 30px; background-color: aqua; text-align: center;">+</div>
             </div>
             <div style="width: 100px;margin-left: 36px;">
                <span class="subtotal">3200</span> <span>元</span>
           </div>
            <div class="del" style="width: 100px;margin-left: 10px;">
                删除
            </div>
        </div>
        <div style="display: flex; background-color: pink; margin-top: 10px;align-items: center;">
            <div>
                <input class="checkone" type="checkbox" name="" id="" value="">
            </div>
            
            <div style="display: flex;">
                <div  style="padding-left: 90px;"> 华为</div>
                <div style="width: 50px; height: 80px; background-color: aqua; margin-left: 40px;">
                </div>
            </div>
            <div class="price" style="width: 100px; margin-left: 72px;">
               2100
            </div>
            <div style="display: flex;">
                <div class="jian" style="width: 30px; height: 30px; background-color: aqua; text-align: center;">-</div>
                <div class="num">2</div>
                <div class="add" style="width: 30px; height: 30px; background-color: aqua; text-align: center;">+</div>
             </div>
             <div style="width: 100px;margin-left: 36px;">
                <span class="subtotal">2100</span> <span>元</span>
           </div>
            <div class="del" style="width: 100px;margin-left: 10px;">
                删除
            </div>
        </div>
         <div>
             <span>
             共3件商品
             </span>
             <span>
                 合计:3400  元
             </span>
         </div>
    </div>


    <script>
         
         document.querySelector('.checkall').onclick=function(){
             console.log(this.checked,'???');
             document.querySelectorAll('.checkone').forEach(item=>{
                 item.checked=this.checked
             })
         }
         document.querySelectorAll('.checkone').forEach(item=>{
                 item.onclick=function(){
                     console.log(Array.from(document.querySelectorAll('.checkone')),'/?????');
                 let checked_status=  Array.from(document.querySelectorAll('.checkone')).every(item=>{
                        return item.checked
                    })
                    document.querySelector('.checkall').checked=checked_status
                 }
             })
       document.querySelectorAll('.del').forEach(item=>{
           item.onclick=function(){
               console.log(this,'????');
               this.parentNode.remove()
           }
       })
       document.querySelectorAll('.jian').forEach(item=>{
           item.onclick=function(){
             let num=  this.parentElement.getElementsByClassName('num')[0].innerHTML
                num--
               if(this.parentElement.getElementsByClassName('num')[0].innerHTML<=1){
                num=1
               }
            //    商品单价
            let    one_price=this.parentElement.previousElementSibling.innerHTML 
            //  商品小计
            let  onetotal=one_price*num
            console.log(onetotal,'一件商品合计');
            //    console.log(this.parentElement.previousElementSibling,'///');
               this.parentElement.getElementsByClassName('num')[0].innerHTML=num

           }
       })
       document.querySelectorAll('.add').forEach(item=>{
           item.onclick=function(){
            //    console.log(this,'??');
            //    console.log(this.parentElement,'获取父亲节点');
            //    console.log(        this.parentElement.getElementsByClassName('num')[0].innerHTML,'节点下的数量');
            let num=  this.parentElement.getElementsByClassName('num')[0].innerHTML
            num++
            //   console.log( this.parentElement.getElementsByClassName('num')[0].innerHTML,'数量啊');
               this.parentElement.getElementsByClassName('num')[0].innerHTML=num

           }
       })
 
    </script>
</body>
</html>